import React from "react";
import BaseScreen from "./BaseScreen";
import styles from "../css/my.module.css";
import ProgressView from "../view/ProgressView";
import PressTouch from "../view/PressTouch";
import * as locations from "../const/locations";
import { myNav, AVATAR, Common } from "../const/imgs";
import { locationTo, locationReplace } from "../utils/LocationUtil";
import { clear, getInfo, getTOKEN } from "../utils/StorageUtil";
import Config from "../Config";
import { MyButton } from "../view/MyButton";
import { HintDialog } from "../view/Dialog";
import { imgTest } from '../const/datas'
import { relative } from "path";
import { msgUnread } from '../service/newsService'
import UserInfo from './components/UserInfo'
class MyScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.timer = null
    this.state = {
      newsData:null
    };
  }
  componentDidMount() {
    this.setTitle("我的");
    this.getNewsInfo()
    this.timer = setInterval(()=>{
      this.getNewsInfo()
    },60000)
  }
  getNewsInfo = () =>{
    msgUnread({
      token:getTOKEN()
    })
    .then(
      res => {
    this.setState({loading:false})
    if(res.error_code ===0){          const data = res.data 
          this.setState({
            newsData:data
          })
        }
      }
    )
  }
  componentWillUnmount(){
    clearInterval(this.timer)
  }
  renderLogout() {
    return (
      <HintDialog
        ref="logout"
        operateText="确定"
        operateClick={() => {
          this.setState({
            defaultMsgDialog: false,
            defaultMsgDialogCon: ""
          });
          clear();
          locationReplace(locations.ENTER);
        }}
      />
    );
  }
  showLogout(msg) {
    this.refs.logout.setState({
      content: msg,
      visibility: true
    });
  }

  handleSubmit() {
    // 退出登录
    this.showLogout("确认退出吗？");
  }
  render() {
    NAVIGATORS[0].value = this.state.can_amount;
    const {newsData} =this.state
    return (
      <div className={styles['m_mine']}>
        <div className={styles["wrapper"]} style={bg}>
          <div style={{
            width: '20px',
            height: '20px',
            position: 'absolute',
            top: '20px',
            right: '20px',
            zIndex:20,
          }}
            onClick={() => { locationTo(locations.NEWS) }}
          >
            {(newsData !==null&&newsData.length)>0&&<div style={{
            width: '8px',
            height: '8px',
            position: 'absolute',
            top: '0',
            right: '0',
            zIndex:21,
            background:'red',
            borderRadius:'50%',
          }}>
            </div>}
            <img src={myNav.NSC} style={{
              width: '100%',
              height: '100%',
            }} />
          </div>
          <UserInfo/>
          <div className={styles["nav_wrapper"]}>
            {NAVIGATORS.map((item, index) => (
              <Navigator
                key={index}
                name={item.name}
                imgurl={item.imgurl}
                path={item.path}
              />
            ))}
          </div>
        </div>
        <div className={styles["wrapper"]}>
          <div style={banner_style} onClick={() => { locationTo(locations.HL) }}>
            <div style={banner_btn_style}>
              点击查看
            </div>
          </div>
        </div>
        <div className={styles["wrapper"]}>
          <ul>
            {NAVIGATORLIST.map((item, index) => (
              <Navlistone
                key={index}
                name={item.name}
                imgurl={item.imgurl}
                path={item.path}
              />
            ))}
          </ul>
        </div>

        <MyButton
          style={styleBtn}
          name={"退出登录"}
          onClick={() => {
            this.handleSubmit();
          }}
        />
        <div>{this.renderLogout()}</div>
      </div>
    );
  }
}



const Navigator = ({ name, imgurl, path }) => {
  return (
    <div className={styles.nav_item} onClick={() => { locationTo(path) }}>
      <div className={styles.nav_item_icon}>
        <img src={imgurl} alt='' />
      </div>
      <div className={styles.nav_item_name}>{name}</div>
    </div>
  );
}

const Navlistone = ({ name, imgurl, path }) => {
  return (
    <li className={styles.nav_list_one} onClick={() => { locationTo(path) }}>
      <div >
      <div className={styles.nav_list_one_l}>
        <img src={imgurl} />
        {name}
      </div>
      </div>
      <div className={styles.nav_list_one_r}>
        <img src={Common.YJT} />
      </div>
    </li>
  );
}

const styleBtn = {
  height: "2.75rem",
  lineHeight: "2.75rem",
  width: "73.6%",
  padding: 0,
  margin: "4.5rem auto 0"
};
let bg = {
  background: "url('" + myNav.BG + "') no-repeat",
  // background: Config.BaseColor,
  backgroundSize: "100% 105%"
};
const banner_style = {
  height: '55px',
  width: '100%',
  background: "url('" + myNav.BANNER + "') no-repeat",
  backgroundSize: "100% 105%",
  position: 'relative',
}
const banner_btn_style = {
  width: '70px',
  height: '20px',
  borderRadius: '10px',
  backgroundColor: "#f8c047",
  borderStyle: "solid",
  borderWidth: '1px',
  borderColor: "#e5e5e5",
  textAlign: 'center',
  lineHeight: '20px',
  fontSize: '11px',
  color: "#ffffff",
  position: 'absolute',
  top: '17px',
  right: '15px',
}
const NAVIGATORS = [
  {
    id: 13,
    name: "日报管理",
    imgurl: myNav.RB,
    path: locations.DAILY_M
  },
  {
    id: 14,
    name: "我的奖金",
    imgurl: myNav.JJ,
    path: locations.MY_BONUS
  },
  {
    id: 1,
    name: "催记管理",
    imgurl: myNav.CJ,
    path: locations.CUIJI_M
  },
];
const NAVIGATORLIST = [
  {
    id: 13,
    name: "常见问题",
    imgurl: myNav.WT,
    path: locations.PROBLEM
  },
  {
    id: 14,
    name: "关于我们",
    imgurl: myNav.GYWM,
    path: locations.US
  },
  // {
  //   id: 1,
  //   name: "客服",
  //   imgurl: myNav.KF,
  //   path: locations.KEFU
  // },
  {
    id: 2,
    name: "设置",
    imgurl: myNav.SZ,
    path: locations.SET
  }
];

export default MyScreen;
